<template>
 <el-card> <div ref="rightEcharts" class="rightEcharts"></div></el-card>
</template>

<script>
import * as echarts from '_echarts@5.4.0@echarts'

export default {
  name: 'RightEcharts',
  data () {
    return {
      myChart1: null
    }
  },
  mounted () {
    this.initCharts()
  },
  methods: {
    initCharts () {
      this.myChart = echarts.init(this.$refs.rightEcharts)
      this.myChart.setOption({
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 20
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 80,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      })
    }
  }

}
</script>

<style scoped>
.rightEcharts{
  width: 500px;
  height: 440px;
  display: inline-block;
}
.el-card{
  margin-top: 25px;
  margin-left: 206px;
  width: 500px;
  height: 440px;
  display: inline-block;
}
</style>
